import React, { useEffect, useRef, useState } from 'react'
import './index.css'
import TemplateData, { TemData } from '../../compoents/Tems/TemplateData';
import mo1 from '../../assets/images/moxin.png'
import mo2 from '../../assets/images/moxz.png'
import mo3 from '../../assets/images/moai.png'
import mo4 from '../../assets/images/mokf.png'
import mo5 from '../../assets/images/modong.png'
import { Tooltip } from 'antd';

function Index() {
  const [activeTab, setActiveTab] = useState<string>(TemplateData[0].id);
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const [tabsPerRow, setTabsPerRow] = useState<number>(4);

  useEffect(() => {
    const calculateTabsPerRow = () => {
      if (containerRef.current) {
        const containerWidth = containerRef.current.offsetWidth;
        const tabWidth = 100; // 假设每个 Tab 按钮的宽度为 120px
        setTabsPerRow(Math.floor(containerWidth / tabWidth));
      }
    };

    calculateTabsPerRow();
    window.addEventListener('resize', calculateTabsPerRow);
    return () => window.removeEventListener('resize', calculateTabsPerRow);
  }, []);

  const handleTabClick = (tabId: string) => {
    setActiveTab(tabId);
  };

  const [showMore, setShowMore] = useState(false);
  const [showMore2, setShowMore2] = useState(false);
  const items = [
    '推荐',
    '手机海报',
    '公众号首图',
    '小红书配图',
    '每日一签',
    '全屏海报',
    '邀请函',
    'PPT16:9',
    '简历',
    '长图海报',
    '公众号次图',
    '主图图标',
    '商品主图',
    '名片',
    '长页H5',
    '直播切片',
    '视频海报',
    '竖版直播背景',
    '横版海报',
    '竖版插画',
  ];

  const items2 = [
    '全部',
    '通用',
    '教育培训',
    '餐饮美食',
    '金融理财',
    '地产家居',
    '精神文明',
    '科技互联网',
    '医疗保健',
    '休闲娱乐',
    '旅游出行',
    '文体娱乐',
    '美容美发',
    '电商',
    '零售行业',
    '生活服务',
    '商业服务',
    '文化建设',
    '农林牧渔'
  ]

  const visibleTabs = isExpanded ? TemplateData : TemplateData.slice(0, tabsPerRow);
  return (
    <div className="main">
      <div className='container'>
        <div className="top">
          <div className='top1'>
            <ul>
              <li className='lis'>分类：</li>
              <li className='telis'>全部</li>
              <li>海报</li>
              <li>公众号</li>
              <li>抖音/小红书</li>
              <li>电商</li>
              <li>PPT/办公</li>
              <li>印刷物料</li>
              <li>H5</li>
              <li>社交生活</li>
              <li>视频</li>
              <li>插画元素</li>
              <li>视频特效</li>
            </ul>
          </div>
          <div className='top1'>
            <ul>
              <li className='lis'>场景：</li>
              {items.slice(0, showMore ? items.length : 10).map((item, index) => (
                <li key={index} className={item === '推荐' ? 'telis' : ''}>{item}</li>
              ))}
              <li onClick={() => setShowMore(!showMore)} style={{ cursor: 'pointer', color: '#999' }}>
                {showMore ? '收起︽' : '更多︾'}
              </li>
            </ul>
          </div>
          <div className='top1'>
            <ul>
              <li className='lis'>用途：</li>
              <li className='telis'>全部</li>
              <li>招聘求职</li>
              <li>宣传推广</li>
              <li>校园生活</li>
              <li>传统气节</li>
              <li>市场营销</li>
              <li>人事行政</li>
              <li>教育宣传</li>
              <li>节日节点</li>
              <li>社交生活</li>
              <li>话题资讯</li>
            </ul>
          </div>
          <div className='top1'>
            <ul>
              <li className='lis'>行业：</li>
              {items2.slice(0, showMore2 ? items.length : 15).map((item, index) => (
                <li key={index} className={item === '全部' ? 'telis' : ''}>{item}</li>
              ))}
              <li onClick={() => setShowMore2(!showMore2)} style={{ cursor: 'pointer', color: '#999' }}>
                {showMore2 ? '收起︽' : '更多︾'}
              </li>
            </ul>
          </div>
        </div>
        <div className="center">
          <div className='menu1' ref={containerRef}>
            <div className='menu1_item'>
              {
                visibleTabs.map((tab: TemData) => (
                  <button key={tab.id} className='but1' onClick={() => handleTabClick(tab.id)} style={{ fontWeight: activeTab === tab.id ? '900' : "normal", fontSize: activeTab === tab.id ? '16px' : '14px' }}>
                    {tab.label}
                  </button>
                ))
              }

            </div>
            <div className='tabmenu'>
              {TemplateData.map((tab: TemData) => (
                <div
                  key={tab.id}
                  style={{
                    display: activeTab === tab.id ? 'block' : 'none',
                    width: '1265px',
                    height: '850px',
                    background: '#fff',
                    padding: '5px'
                  }}
                >
                  {tab.content}
                </div>
              ))}
            </div>
          </div>

        </div>
        <div className='tem'>
          <div className='tem1'>
            <Tooltip placement="left" title="收藏">
              <span><img src={mo1} alt="" /></span>
            </Tooltip>
            <Tooltip placement="left" title="下载">
              <span><img src={mo2} alt="" /></span>
            </Tooltip>
            <Tooltip placement="left" title="赚钱">
              <span><img src={mo3} alt="" /></span>
            </Tooltip>
            <Tooltip placement="left" title="客服">
              <span><img src={mo4} alt="" /></span>
            </Tooltip>
          </div>
          <div className='tem2'>
            <Tooltip placement="left" title="我要吐槽">
              <img src={mo5} alt="" />
              <p><button>意见反馈</button></p>
            </Tooltip>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
